<template>
  <div>
    <el-drawer v-bind="$attrs" v-on="$listeners" @opened="onOpen" @close="onClose">
      <div class="action-bar" :style="{ 'text-align': 'left' }">
        <span class="bar-btn delete-btn" @click="$emit('update:visible', false)">
          <i class="el-icon-circle-close" />
          关闭
        </span>
      </div>
      <preview ref="preview" />
    </el-drawer>
  </div>
</template>

<script>
export default {
  components: { preview: () => import('@/components/xform/preview/index.vue') },
  // eslint-disable-next-line vue/require-prop-types
  props: ['formData'],
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    onOpen() {
      console.log('onOpen:', this.formData)
      this.$refs.preview.load(this.formData)
    },
    onClose() {},
  },
}
</script>

<style lang="scss" scoped>
@import '@/components/xform/styles/mixin.scss';

::v-deep .el-drawer__header {
  display: none;
}
@include action-bar;

.json-editor {
  height: calc(100vh - 33px);
}
</style>
